<template>
  <div>
    <div class="flex-between" style="padding: 30px 20px">
      <div style="font-size: 24px; font-weight: 500; color: #000000">
        意见反馈
      </div>
      <!-- <a-icon
        type="close-circle"
        theme="filled"
        style="
          color: #cccccc;
          font-size: 32px;
          display: flex;
          justify-content: right;
        "
        @click="closeModal"
      /> -->
    </div>
    <div style="width: 620px; height: 0px; border: 1px solid #f5f5f5"></div>

    <div style="padding: 0 20px">
      <div class="fd1_tit">反馈类型<span style="color: #f04142">*</span></div>
      <div class="ubIndx">
        <!-- <a-radio-group name="radioGroup" v-model="fd1RG">
          <a-radio value="我遇到了问题">我遇到了问题</a-radio>
          <a-radio value="我要提建议" style="margin-left: 130px"
            >我要提建议</a-radio>
        </a-radio-group> -->
        <el-radio-group v-model="fd1RG">
          <el-radio value="我遇到了问题" :label="1">我遇到了问题</el-radio>
          <el-radio value="我要提建议" :label="2" style="margin-left: 130px">我要提建议</el-radio>
        </el-radio-group>
      </div>
      <div class="fd1_tit">内容描述<span style="color: #f04142">*</span></div>
      <el-input type="textarea" placeholder="请填写您的问题或建议" :maxLength="300" v-model="valueFD" @change="txChangeFD"
        :autosize="{ minRows: 6, maxRows: 6}" :resize="'none'" style="
          resize: none;
          height: 137px;
          width: 100%;
          border-radius: 5px;
          margin-top: 12px;
          background: #f8f8f8;
          color: #000;
        " />
      <div style="text-align: right; margin-right: 2%; margin-top: 10px">
        {{ textLength }}/300
      </div>
      <div class="fd1_tit" style="margin-top: 20px">上传截图</div>
      <div class="fd1_des">便于快速解决问题</div>
      <div style="margin-top: 10px; margin-bottom: -30px">
        <a-upload name="image" accept=".jpeg,.png,.jpg" :action="$baseURL + '/biz/uploadImgage'" :headers="headers"
          list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="upChange">
          <div v-if="fileList.length < limitImg">
            <a-icon type="plus" style="font-size: 30px" />
          </div>
        </a-upload>
      </div>
      <div class="fd1_tit">联系方式</div>
      <div class="flex-align">
        <span style="
            font-size: 18px;
            line-height: 20px;
            color: #373737;
            margin-right: 10px;
          ">手机号</span><el-input placeholder="请输入手机号" style="
            font-size: 16px;
            line-height: 20px;
            color: #999999;
            width: 222px;
            height: 35px;
            border: none;
            background: #f8f8f8;
            color: #000;
          " v-model="contactPhone" />
      </div>
      <div class="flex-align" style="margin-top: 20px">
        <span style="
            font-size: 18px;
            line-height: 20px;
            color: #373737;
            margin-right: 28px;
          ">邮箱</span><el-input placeholder="请输入邮箱" style="
            font-size: 16px;
            line-height: 20px;
            color: #999999;
            width: 222px;
            height: 35px;
            border: none;
            background: #f8f8f8;
            color: #000;
          " v-model="email" />
      </div>
    </div>
    <div class="fd1_bom">
      <div class="btn1 flex-center" @click="closeModal">取消</div>
      <div class="btn3 flex-center" v-if="isSubmit1 && isSubmit2" @click="addFeedback">提交</div>
      <div class="btn2 flex-center" v-else>提交</div>
    </div>
    <el-dialog :visible="previewVisible" @close="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </el-dialog>
  </div>
</template>

<script>
  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  }
  export default {
    name: "FD",
    components: {},
    props: {},
    data() {
      return {
        fd1RG: -1,
        isSubmit1: false,
        isSubmit2: false,
        visibleFeedback: false,
        feedbackList: [{
            title: "产品建议",
          },
          {
            title: "功能故障",
          },
          {
            title: "其他问题",
          },
        ],
        valfd: undefined,
        valueFD: "",

        fileList: [],
        limitImg: 1,
        previewVisible: false,
        previewImage: "",

        picUrl: "",
        contactPhone: "",
        email: "",
      };
    },
    watch: {
      fd1RG(nV, oV) {
        console.log(nV, oV);
        if (nV != -1) {
          this.isSubmit1 = true;
        } else {
          this.isSubmit1 = false;
        }
      },
      textLength(nV, oV) {
        console.log(nV, oV);
        if (nV > 0) {
          this.isSubmit2 = true;
        } else {
          this.isSubmit2 = false;
        }
      },
    },
    computed: {
      headers() {
        return {
          session_token: localStorage.getItem("adv_session_token"),
        };
      },
      textLength() {
        return (this.valueFD || "").length;
      },
    },
    methods: {
      async addFeedback() {
        let res = await this.$API.members.addAdFeedback({
          adUserName:JSON.parse(localStorage.getItem('advertisementUserMes')).name,
          questionType: this.fd1RG,
          intro: this.valueFD,
          picUrl: this.picUrl,
          contactPhone: this.contactPhone,
          contactEmail: this.email,
        });
        if (res.code == 200) {
          console.log("反馈", res);
          this.$message.success("反馈成功！");
          this.closeModal()
        }
      },
      closeModal() {
        this.$emit("closeModal");
        this.fd1RG = -1
        this.valueFD = ''
        this.picUrl = ''
        this.contactPhone = ''
        this.email = ''
      },
      handleCancel() {
        this.previewVisible = false;
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      upChange({
        file,
        fileList
      }) {
        this.fileList = fileList;
        // console.log(fileList);
        if (file.status === "done") {
          console.log(fileList[0].response.data.imgageUrl);
          this.picUrl = fileList[0].response.data.imgageUrl;
        }
      },
      handleChangeFD(e) {
        console.log(e);
      },
      txChangeFD() {
        // console.log(e);
      },
      toIndex() {
        let routeData = this.$router.resolve({
          name: "AnswerIndex",
        });
        window.open(routeData.href, "_blank");
      },
    },
    created() {},
    mounted() {},
  };
</script>
<style lang="scss" scoped>
  .fd1_tit {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    margin-top: 50px;
    margin-bottom: 20px;
  }

  .fd1_des {
    margin-top: -15px;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    color: #d4d3d4;
  }

  .fd1_bom {
    margin-top: 40px;
    width: 620px;
    height: 88px;
    border-radius: 0px 0px 8px 8px;
    background: #ffffff;
    border-top: 2px solid #f5f5f5;

    display: flex;
    align-items: center;
    // justify-content: end;
    justify-content: flex-end;

    .btn1 {
      width: 115px;
      height: 51px;
      border-radius: 4px;
      background: #f2f2f2;

      font-size: 20px;
      font-weight: 500;
      line-height: 20px;
      color: #000000;
    }

    .btn2 {
      width: 115px;
      height: 51px;
      border-radius: 4px;
      background: #cccccc;

      font-size: 20px;
      font-weight: 500;
      line-height: 20px;
      color: #ffffff;

      margin: 0 20px;
    }

    .btn3 {
      width: 115px;
      height: 51px;
      border-radius: 4px;
      // background: #11a4aa;
      background: #FF68B2;
      font-size: 20px;
      font-weight: 500;
      line-height: 20px;
      color: #ffffff;

      margin: 0 20px;
    }
  }



  .flex-align {
    display: flex;
    align-items: center;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-align-column {
    display: flex;
    // align-items: center;
    flex-direction: column;
  }

  .flex-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .flex-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .flex-align-between {
    display: flex;
    // align-items: center;
    justify-content: space-between;
  }
</style>
